import React from 'react';
import { Form, Select, Input, FormInstance } from 'antd';

const { Option } = Select;
const { TextArea } = Input;

interface CodeBlockEditorProps {
  form: FormInstance;
  codeFieldName?: string;
  languageFieldName?: string;
}

const CodeBlockEditor: React.FC<CodeBlockEditorProps> = ({
  form,
  codeFieldName = 'code_content',
  languageFieldName = 'code_language',
}) => {
  return (
    <div>
      <Form.Item
        name={languageFieldName}
        label="编程语言"
        rules={[{ required: true, message: '请选择编程语言' }]}
      >
        <Select placeholder="选择编程语言" style={{ width: 200 }}>
          <Option value="cpp">C++</Option>
          <Option value="c">C</Option>
          <Option value="python">Python</Option>
          <Option value="java">Java</Option>
          <Option value="javascript">JavaScript</Option>
          <Option value="go">Go</Option>
          <Option value="rust">Rust</Option>
        </Select>
      </Form.Item>

      <Form.Item
        name={codeFieldName}
        label="代码内容"
        rules={[{ required: true, message: '请输入代码内容' }]}
      >
        <TextArea
          rows={10}
          placeholder="请输入代码..."
          style={{ fontFamily: 'monospace' }}
        />
      </Form.Item>
    </div>
  );
};

export default CodeBlockEditor;

